<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>组件卸载</title>
    <script src="https://unpkg.com/vue@next"></script>
  </head>
  <body>
    <div id="Application">
        <sub-com v-if="show"></sub-com>
        <button @click="changeShow">测试</button>
    </div>
  </body>

  <script>
    const sub= {
      beforeCreate(){
        console.log("组件创建前")
      },
      created(){
        console.log("组件创建完成")
      },
      beforeMount(){
        console.log("组件创挂载前")
      },
      mounted(){
        console.log("组件创挂完成")
      },
      beforeUnmount(){
        console.log("组件即将被卸载前调用")
      },
      Unmounted(){
        console.log("组件被卸载后调用")
      },
      template: "<div>测试组件</div>"
    }
    const App = Vue.createApp({
        data(){
            return {
                show:false
            }
        },
        methods:{
            changeShow(){
                this.show = !this.show
            }
        }
    })
    App.component("sub-com", sub)
    App.mount("#Application")
  </script>

</html>